<template>
  <section>
    <el-upload
      :action="sys ? sysUrl : actionUrl"
      :headers="head"
      :limit="limit"
      :multiple="multiple"
      list-type="picture-card"
      :on-success="handleSuccess"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :class="{ disabled: uploadDisabled }"
      :file-list="fileList"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="图片未找到" />
    </el-dialog>
  </section>
</template>
<script>
import template from '../modules/index/system/template.vue';
export default {
  components: { template },
  props: {
    value: {
      type: [String, Array],
      default: function () {
        return "";
      },
    },
    limit: {
      type: [Number],
      default: 1,
    },
    type: {
      type: [String, Number],
      default: "",
    },
    path: {
      type: String,
      default: "system",
    },
    sys: {
      type: Boolean,
      default: false,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    // console.log(this.value);
    // if (this.value) {
    //   let list = [];
    //   if (this.value.indexOf(",") !== -1) {
    //     list = this.value.split(",");
    //   } else {
    //     list = [this.value];
    //   }
    //   console.log(list);
    //   list.map((it) => {
    //     this.fileList.push({
    //       //fixme 政务服务中心需要用image1
    //       // url: window.api.image1 + this.value
    //       url: window.api.image + "/" + it,
    //     });
    //   });

    //   if (this.limit > 1 && !this.multiple) {
    //     return;
    //   }
    //   this.uploadDisabled = true;
    // } else {
    //   this.uploadDisabled = false;
    // }
    // if (this.value) {
    //   this.fileList.push({
    //     //fixme 政务服务中心需要用image1
    //     // url: window.api.image1 + this.value
    //     url: window.api.image + "/" + this.value,
    //   });
    //   console.log('url:', window.api.image + "/" + this.value)
    //   if (this.limit > 1 && !this.multiple) {
    //     return;
    //   }
    //   this.uploadDisabled = true;
    // } else {
    //   this.uploadDisabled = false;
    // }
  },
  watch: {
    value(val) {
      if (val) {
        let list = [];
        if (val.indexOf(",") !== -1) {
          list = val.split(",");
        } else {
          list = [val];
        }
        console.log(list);
        this.fileList=[];
        list.map((it) => {
          this.fileList.push({
            //fixme 政务服务中心需要用image1
            // url: window.api.image1 + this.value
            url: window.api.image + "/" + it,
          });
        });
        if (this.limit > 1 && !this.multiple) {
          return;
        }
        this.uploadDisabled = true;
      } else {
        this.uploadDisabled = false;
      }
    },
  },
  data() {
    return {
      uploadDisabled: false, //是否允许上传
      dialogImageUrl: "",
      dialogVisible: false,
      actionUrl: window.api.uploadUrl1 + `?path=${this.path}`,
      sysUrl: window.api.sysUploadUrl + `?path=${this.path}`,
      head: {
        userRole: "ADMIN",
        token: window.sessionStorage.getItem("token"),
      },
      fileList: [],
    };
  },
  methods: {
    //上传成功
    handleSuccess(response, file, fileList) {
      this.$emit(
        "add-picture",
        this.sys ? response : response.value,
        this.type,
        fileList
      );
      fileList.map((i) => {
        if (!i.response) {
          console.log(i.url.indexOf("appliance"));
          console.log(i.url.slice(i.url.indexOf("appliance")));
          i.response = {
            value: i.url.slice(i.url.indexOf("appliance")),
          };
        }
      });
      const fileListArr = fileList.map((item) => item.response.value).join(",");
      this.$emit("input", fileListArr);
      if (this.limit > 1 && !this.multiple) {
        return;
      }
      this.uploadDisabled = true;
    },
    //点击预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //删除图片
    handleRemove(file, fileList) {
      console.log(fileList);
      fileList.map((i) => {
        if (!i.response) {
          console.log(i.url.indexOf("appliance"));
          console.log(i.url.slice(i.url.indexOf("appliance")));
          i.response = {
            value: i.url.slice(i.url.indexOf("appliance")),
          };
        }
      });
      const fileListArr = fileList.map((item) => item.response.value).join(",");
      this.$emit("input", fileListArr);
      this.$emit("del-picture", this.type,fileListArr);
      this.uploadDisabled = false;
    },
  },
};
</script>
<style scoped>
.disabled /deep/ .el-upload--picture-card {
  /* display: none; */
}
</style>
